<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>商家管理中心</p>
      <i class="fa fa-sign-out" @click="logout" title="退出登录"></i>
    </header>

    <!-- 商家信息卡片 -->
    <div class="business-info-card" v-if="business">
      <div class="business-header">
        <img :src="getBusinessImage(business.businessId)" alt="商家图片">
        <div class="business-basic">
          <h2>{{ business.businessName }}</h2>
          <p class="business-address">{{ business.businessAddress }}</p>
          <p class="business-explain">{{ business.businessExplain }}</p>
        </div>
      </div>
      <div class="business-stats">
        <div class="stat-item">
          <span class="stat-label">起送价</span>
          <span class="stat-value">¥{{ business.starPrice }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">配送费</span>
          <span class="stat-value">¥{{ business.deliveryPrice }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">商家ID</span>
          <span class="stat-value">{{ business.businessId }}</span>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="function-menu">
      <div class="menu-item" @click="goToFoodManage">
        <i class="fa fa-cutlery"></i>
        <div class="menu-text">
          <h3>商品管理</h3>
          <p>管理您的商品信息、价格等</p>
        </div>
        <i class="fa fa-angle-right"></i>
      </div>
      
      <div class="menu-item" @click="viewOrders">
        <i class="fa fa-list-alt"></i>
        <div class="menu-text">
          <h3>订单查看</h3>
          <p>查看您的商品订单信息</p>
        </div>
        <i class="fa fa-angle-right"></i>
      </div>
      

    </div>

    <!-- 快速统计 -->
    <div class="quick-stats" v-if="foodCount >= 0">
      <div class="stats-header">
        <h3>商品统计</h3>
      </div>
      <div class="stats-content">
        <div class="stats-item">
          <span class="stats-number">{{ foodCount }}</span>
          <span class="stats-label">商品总数</span>
        </div>
        <div class="stats-item">
          <span class="stats-number">{{ business?.monthlySales || 0 }}</span>
          <span class="stats-label">月销量</span>
        </div>
      </div>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from "../components/Footer.vue";
import { useRouter } from "vue-router";
import { ref, inject, onMounted } from "vue";
import { getSessionStorage, removeSessionStorage } from "../common.js";

// 导入商家图片
import sj01 from '@/assets/sj01.png'
import sj02 from '@/assets/sj02.png'
import sj03 from '@/assets/sj03.png'
import sj04 from '@/assets/sj04.png'
import sj05 from '@/assets/sj05.png'
import sj06 from '@/assets/sj06.png'
import sj07 from '@/assets/sj07.png'
import sj08 from '@/assets/sj08.png'
import sj09 from '@/assets/sj09.png'

const axios = inject("axios");
const router = useRouter();

const business = ref(null);
const foodCount = ref(-1);

// 获取商家图片
const getBusinessImage = (businessId) => {
  const imageMap = {
    1: sj01, 2: sj02, 3: sj03, 4: sj04, 5: sj05,
    6: sj06, 7: sj07, 8: sj08, 9: sj09,
    10001: sj01, 10002: sj02, 10003: sj03, 10004: sj04,
    10005: sj05, 10006: sj06, 10007: sj07, 10008: sj08, 10009: sj09
  }
  return imageMap[businessId] || sj01
}

// 跳转到商品管理
const goToFoodManage = () => {
  router.push({ path: '/foodManage' });
};

// 查看订单
const viewOrders = () => {
  router.push({ path: '/businessOrders' });
};

// 退出登录
const logout = () => {
  if (confirm("确定要退出登录吗？")) {
    removeSessionStorage("business");
    router.push({ path: '/' });
  }
};

// 加载商品统计
const loadFoodStats = async () => {
  if (!business.value) return;
  
  try {
    const response = await axios.get(`/api/FoodController/listFoodByBusinessId?businessId=${business.value.businessId}`);
    if (response && Array.isArray(response)) {
      foodCount.value = response.length;
    } else {
      foodCount.value = 0;
    }
  } catch (error) {
    console.error("加载商品统计失败:", error);
    foodCount.value = 0;
  }
};

// 页面初始化
onMounted(() => {
  // 检查登录状态
  const businessInfo = getSessionStorage("business");
  if (!businessInfo) {
    alert("请先登录！");
    router.push({ path: '/businessLogin' });
    return;
  }
  
  business.value = businessInfo;
  console.log("当前登录商家:", business.value);
  
  // 加载商品统计
  loadFoodStats();
});
</script>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 14vw;
}

/* header样式 */
header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.5vw;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

header .fa-sign-out {
  position: absolute;
  right: 4vw;
  font-size: 5vw;
  cursor: pointer;
}

/* 商家信息卡片 */
.business-info-card {
  width: 94%;
  margin: 14vw auto 2vw auto;
  background-color: #fff;
  border-radius: 2vw;
  padding: 4vw;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.business-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 3vw;
}

.business-header img {
  width: 20vw;
  height: 20vw;
  border-radius: 2vw;
  margin-right: 3vw;
  flex-shrink: 0;
}

.business-basic h2 {
  font-size: 4.5vw;
  color: #333;
  margin: 0 0 1vw 0;
}

.business-address {
  font-size: 3vw;
  color: #0097ff;
  margin: 1vw 0;
}

.business-explain {
  font-size: 3vw;
  color: #666;
  margin: 1vw 0;
}

.business-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 3vw;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 2.8vw;
  color: #999;
  margin-bottom: 1vw;
}

.stat-value {
  display: block;
  font-size: 3.5vw;
  font-weight: bold;
  color: #333;
}

/* 功能菜单 */
.function-menu {
  width: 94%;
  margin: 2vw auto;
  background-color: #fff;
  border-radius: 2vw;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 4vw 3vw;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: #f8f8f8;
}

.menu-item > .fa {
  font-size: 5vw;
  color: #0097ff;
  width: 8vw;
  text-align: center;
  margin-right: 3vw;
}

.menu-text {
  flex: 1;
}

.menu-text h3 {
  font-size: 3.8vw;
  color: #333;
  margin: 0 0 1vw 0;
}

.menu-text p {
  font-size: 2.8vw;
  color: #999;
  margin: 0;
}

.menu-item .fa-angle-right {
  font-size: 4vw;
  color: #ccc;
}

/* 快速统计 */
.quick-stats {
  width: 94%;
  margin: 2vw auto;
  background-color: #fff;
  border-radius: 2vw;
  padding: 4vw;
}

.stats-header h3 {
  font-size: 4vw;
  color: #333;
  margin: 0 0 3vw 0;
  text-align: center;
}

.stats-content {
  display: flex;
  justify-content: space-around;
}

.stats-item {
  text-align: center;
}

.stats-number {
  display: block;
  font-size: 6vw;
  font-weight: bold;
  color: #0097ff;
  margin-bottom: 1vw;
}

.stats-label {
  display: block;
  font-size: 2.8vw;
  color: #666;
}

/* 响应式适配 */
@media (max-width: 480px) {
  header {
    height: 50px;
  }
  
  .business-info-card {
    margin-top: 60px;
  }
  
  .business-header img {
    width: 80px;
    height: 80px;
    margin-right: 12px;
  }
  
  .business-basic h2 {
    font-size: 18px;
  }
  
  .business-address, .business-explain {
    font-size: 12px;
  }
  
  .menu-item {
    padding: 16px 12px;
  }
  
  .menu-text h3 {
    font-size: 15px;
  }
  
  .menu-text p {
    font-size: 11px;
  }
}
</style> 